<template>
    <view class="content">
        <view class="main-info">
            <view class="main-info-wrap">
                <up-form labelPosition="top" :model="state.model" :rules="state.rules" ref="formRef">
                    <up-form-item label="公司名称" prop="info.corporateName" borderBottom :labelWidth="100" required  ref="item1">
                        <up-input v-model="state.model.info.corporateName" disabledColor="#ffffff" border="none"
                            placeholder="请填写公司名称"></up-input>
                    </up-form-item>
                    <up-form-item label="职位名称" prop="info.jobName" borderBottom :labelWidth="100" required>
                        <up-input v-model="state.model.info.jobName" disabledColor="#ffffff" border="none" placeholder="请填写职位名称"></up-input>
                    </up-form-item>
                    <up-form-item label="在职时间" prop="info.startDate" borderBottom :labelWidth="100" required>
                        <view style="display: flex">
                           <view @click="openPick(1)">
                            <up-input v-model="state.model.info.startDate" disabled="true" disabledColor="#ffffff" border="none" placeholder="开始时间"
                            ></up-input>
                           </view>
                            <up-icon name="arrow-right"></up-icon>
                            <view @click="openPick(2)">
                                <up-input v-model="state.model.info.endDate" disabled="true" disabledColor="#ffffff" border="none" placeholder="结束时间"
                               ></up-input>
                            </view>
                        </view>
                    </up-form-item>
                    <up-form-item label="工作内容" prop="info.content" :labelWidth="100" required>
                        <up-textarea v-model="state.model.info.content" placeholder="工作内容"></up-textarea>
                    </up-form-item>
                </up-form>
            </view>
        </view>
        <up-datetime-picker ref="datetimePickerRef" :show="state.showPick" v-model="state.pickvalue" mode="date"
            :formatter="formatter" @confirm="onPickConfirm" @cancel="state.showPick=false"></up-datetime-picker>
        <view class="fixed-action-wrap">
            <view class="fixed-action-wrap-button" @click="save">保存</view>
        </view>
    </view>
</template>
<script setup>
import { ref, reactive,getCurrentInstance } from "vue"
import { onReady } from "@dcloudio/uni-app";

const {proxy}=getCurrentInstance()
const formRef = ref(null)
const datetimePickerRef = ref(null)
const state = reactive({
    model: {
        info: {
            corporateName: "",
            jobName: "",
            startDate: "",
            endDate: "",
            content: ""
        },
    },
    rules: {
        'info.corporateName': {
            type: 'string',
            required: true,
            message: '请填写公司名称',
            trigger: ['blur', 'change'],
        },
        'info.jobName': {
            type: 'string',
            required: true,
            message: '请填写职位名称',
            trigger: ['blur', 'change', 'click'],
        },
        'info.startDate': {
            type: 'string',
            required: true,
            message: '请选择开始时间',
            trigger: ['blur', 'change', 'click'],
        },
        'info.endDate': {
            type: 'string',
            required: true,
            message: '请选择结束时间',
            trigger: ['blur', 'change'],
        },
        'info.content': {
            type: 'string',
            required: true,
            message: '请填写工作内容',
            trigger: ['blur', 'change', 'click'],
        }
    },
    showPick: false,
    showPick_key: "",
    pickvalue: ref(Date.now())
})

function openPick(type) {
    state.showPick = true
    state.showPick_key = type == 1 ? 'startDate' : 'endDate'
}
function onPickConfirm(e) {
    state.showPick = false
    let date = new Date(e.value);

    let formattedDate = `${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')}`;

    state.model.info[state.showPick_key] = formattedDate
}

function save(){
    formRef.value?.validate().then(async (valid) => {
        if (valid) {
            proxy.emit('on-work-add', state.model.info);
            uni.navigateBack()
        } else {
            uni.$u.toast('校验失败')
        }
    }).catch(() => {
        // 处理验证错误  
        uni.$u.toast('校验失败')
    });
}
function toResumeWork() {
    let path = "/pages/mine/resume-work"
    this.toPage(path)
}
function toResumeSkill() {
    let path = "/pages/mine/resume-skill"
    this.toPage(path)
}
function toPage(url) {
    uni.navigateTo({ url })
}
const formatter = (type, value) => {
    if (type === 'year') {
        return `${value}年`;
    }
    if (type === 'month') {
        return `${value}月`;
    }
    if (type === 'day') {
        return `${value}日`;
    }
    return value;
};

onReady(() => {
    // 微信小程序需要用此写法
    datetimePickerRef.value.setFormatter(formatter);
});
</script>
<style lang="scss">
page {
    // padding: 32rpx;
    background-color: #F5F5F5;
}
</style>
<style lang="scss" scoped>
.main-info {
    // padding: 32rpx;
    // margin-top: 32rpx;

    &-wrap {
        width: 100%;
        padding: 20rpx 48rpx;
        background: #FFFFFF;
        box-sizing: border-box;
        border-radius: 12rpx 12rpx 12rpx 12rpx;
    }

    .area {
        display: flex;
        align-items: center;
        .line {
            width: 8rpx;
            height: 32rpx;
            background: #F2CB51;
            border-radius: 12rpx 12rpx 12rpx 12rpx;
        }

        .text {
            margin-left: 20rpx;
            width: 128rpx;
            height: 44rpx;
            font-family: PingFang SC, PingFang SC;
            font-weight: 500;
            font-size: 32rpx;
            color: #323232;
            line-height: 38rpx;
            text-align: left;
            font-style: normal;
            text-transform: none;
        }
    }
}

.fixed-action-wrap {
    position: fixed;
    left: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 128rpx;
    padding: 32rpx;
    padding-bottom: env(safe-area-inset-bottom);
    box-sizing: border-box;

    &-button {
        display: flex;
        align-items: center;
        justify-content: center;
        width: calc(100% - 24px);
        height: 80rpx;
        background: #F2CB51;
        border-radius: 58rpx 58rpx 58rpx 58rpx;
    }
}
</style>